<template>
  <div class="container">
    <el-form ref="form" :model="form" :rules="rules" label-width="210px">
      <el-form-item label="名称" prop="name">
        <el-input
            v-model="form.name"
            placeholder="请填写名称"
            clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="小程序ID" prop="accessKey">
        <el-input
            v-model="form.accessKey"
            placeholder="请填写小程序ID"
            clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="小程序密钥" prop="secretKey">
        <el-input
            v-model="form.secretKey"
            placeholder="请填写小程序密钥"
            clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="消息推送token" prop="token">
        <el-input
            v-model="form.token"
            placeholder="请填写消息推送token"
            clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="消息推送加密密钥" prop="aesKey">
        <el-input
            v-model="form.aesKey"
            placeholder="请填写消息推送加密密钥"
            clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="消息推送数据格式" prop="msgDataFormat">
        <el-input
            v-model="form.msgDataFormat"
            placeholder="请填写消息推送数据格式，XML或者JSON"
            clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="小程序二维码" prop="qrcode">
        <upload-image
            v-model="form.qrcode"
            :preview="qrcodePreview"
            @update:value="form.qrcode = $event"
            @update:preview="qrcodePreview = $event"
            :data="{
              tplCode: ossTplCode,
              prefix: 'pic/wechat',
              renamed: true,
            }"
            :isCropper="true"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
            v-model="form.status"
            placeholder="请填写状态"
            class="handle-select mr10"
            clearable
        >
          <el-option
              v-for="item in $enum.getMapItems('status')"
              :key="item.value"
              :label="item.name"
              :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
            size="small"
            v-model="form.remark"
            placeholder="请填写备注"
            type="textarea"
            :autosize="{ minRows: 10, maxRows: 20 }"
            show-word-limit
            maxlength="99"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" size="small" @click="saveEdit"
        >保存
        </el-button
        >
        <el-button size="small" @click="goBack">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>

import {
  wechatConfigMaDetailApi,
  wechatConfigMaEditApi,
  wechatConfigMaSaveApi,
} from "../../api/setup/wechatConfigMa";
import {createObjectBase, deepCopy} from "@/utils";

const obj = {
  id: "",
  status: "ENABLE",
  name: "",
  accessKey: "",
  secretKey: "",
  token: "",
  aesKey: "",
  msgDataFormat: "",
  useRedis: "",
  qrcode: "",
  remark: "",
};
const mgtOssTplCode = process.env.VUE_APP_MGT_OSS_TPL_CODE;
export default {
  data() {
    return {
      form: deepCopy(obj),
      ossTplCode: mgtOssTplCode,
      qrcodePreview: "",
      rules: {
        name: [
          {required: true, message: "请填写名称", trigger: "change"},
          {max: 20, message: "长度不能超过20个字符", trigger: "change"},
        ],
        accessKey: [
          {required: true, message: "请填写小程序ID", trigger: "change"},
          {max: 99, message: "长度不能超过99个字符", trigger: "change"},
        ],
        secretKey: [
          {required: true, message: "请填写小程序密钥", trigger: "change"},
          {max: 99, message: "长度不能超过99个字符", trigger: "change"},
        ],
        token: [
          {max: 99, message: "长度不能超过99个字符", trigger: "change"},
        ],
        aesKey: [
          {max: 99, message: "长度不能超过99个字符", trigger: "change"},
        ],
        msgDataFormat: [
          {max: 99, message: "长度不能超过99个字符", trigger: "change"},
        ],
        remark: [
          {max: 99, message: "长度不能超过99个字符", trigger: "change"},
        ],
      },
    };
  },
  methods: {
    // 编辑操作
    getDetail(id) {
      if (!id) {
        if (this.$refs.form != undefined) {
          this.$refs['form'].resetFields();
          this.qrcodePreview = "";
        }
      } else {
        wechatConfigMaDetailApi({id}).then((res) => {
          const data = deepCopy(res?.bizData);
          this.qrcodePreview = data.qrcodeStr;
          this.form = data;
        });
      }
    },
    saveEdit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const data = createObjectBase(this.form, Object.keys(obj));
          const {id} = data;
          const fn = id ? wechatConfigMaEditApi : wechatConfigMaSaveApi;
          fn(data).then((res) => {
            this.goBack();
          });
        } else {
          return false;
        }
      });
    },
    goBack() {
      this.$router.goPage({
        path: "/wechat/config/ma/page",
      });
    },
  },
  created() {
    const {id} = this.$route.query;
    this.getDetail(id);
  },
};
</script>
